<template>
  <div class="box-dataReview">
    <div class="box-controller">
      <div class="box-search">
        <div class="box-search-left">
          <el-form :inline="true" :model="formParam" style="width: 100%">
            <el-row :gutter="20">
              <el-col :span="4">
                <el-form-item label="状态:">
                  <el-select v-model="formParam.status" placeholder="请选择状态" clearable>
                    <el-option
                      v-for="(item, index) of auditStatusList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="审批申请号:">
                  <el-input v-model="formParam.applicationNo" placeholder="请输入审批申请号" clearable />
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item label="申请人:">
                  <el-input v-model="formParam.applicantName" placeholder="请输入申请人姓名" clearable />
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="申请日期:">
                  <el-date-picker
                    v-model="dateRangeArr"
                    type="daterange"
                    range-separator="-"
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item class="form-item-responsive">
                  <el-button type="primary" class="zdy-btn" @click="searchWay">查询</el-button>
                  <el-button class="zdy-btn" @click="resetForm">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div class="controller-page">
        <div class="card-table">
          <div class="card-total-txt">
            <span>共搜索到{{ total }}条数据</span>
          </div>
          <div class="table-list">
            <el-table
              ref="multipleTableRef"
              :data="dataList"
              row-key="id"
              style="width: 100%"
              height="100%"
              border
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="index" width="60" align="center" label="序号" />

              <el-table-column prop="status" align="left" label="状态" min-width="140">
                <template #default="scope">
                  <div class="statusBox">
                    <span class="point" :class="getStatusColor(scope.row.status)"></span>
                    <span>
                      {{ getStatusLabel(scope.row.status) }}
                    </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="applicationNo" align="left" label="审批申请号" min-width="200" />
              <el-table-column prop="applicantName" align="left" label="申请人" min-width="140" />
              <el-table-column prop="createdAt" align="left" label="申请时间" min-width="180"> </el-table-column>
              <el-table-column align="left" label="申请指标信息" min-width="170">
                <template #default="{ row }">
                  <span>共申请{{ row.quantity }}个指标审批</span>
                </template>
              </el-table-column>
              <el-table-column prop="approvalAt" align="left" label="审核时间" min-width="180"> </el-table-column>
              <el-table-column fixed="right" align="left" label="操作" width="240">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="viewDetailHandle(scope.row)">查看详情</el-button>
                  <el-divider direction="vertical" />
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="previewHandle(scope.row)"
                    :disabled="scope.row.status != '2'"
                  >
                    预览
                  </el-button>
                  <el-divider direction="vertical" />
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="approveHandle(scope.row)"
                    :disabled="scope.row.status != '2'"
                  >
                    通过
                  </el-button>
                  <el-divider direction="vertical" />
                  <el-button
                    link
                    type="primary"
                    size="small"
                    @click="rejectHandle(scope.row)"
                    :disabled="scope.row.status != '2'"
                  >
                    驳回
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="card-pagination">
            <el-pagination
              :small="true"
              v-model:current-page="formParam.pageNum"
              v-model:page-size="formParam.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <auditSituationDialog
      ref="auditSituationRef"
      v-model:visible="auditSituationVisible"
      :title="auditSituationTitle"
      :dialogType="auditSituationType"
      :rowData="auditSituationRow"
      @updateList="getList"
    ></auditSituationDialog>
  </div>
</template>

<script setup>
import { onMounted, ref, watchEffect, reactive } from "vue"
import auditSituationDialog from "./components/auditSituationDialog.vue"
import { ElMessage, ElMessageBox } from "element-plus"
import { audits, findAuditsByPage, findAuditsDetails } from "../../api/datamanage/dataReview"

const auditSituationVisible = ref(false)
const auditSituationType = ref("1")
const auditSituationRow = ref({})
const auditSituationTitle = ref("")

const auditStatusList = ref([
  // { label: "草稿", value: "1", color: "color-bg-yellow" },
  { label: "等待审批", value: "2", color: "color-bg-blue" },
  { label: "审批通过", value: "3", color: "color-bg-green" },
  { label: "审批驳回", value: "0", color: "color-bg-red" }
  // { label: "作废", value: "4", color: "color-bg-grey" }
])
const formParam = reactive({
  status: "",
  applicationNo: "",
  applicantName: "",
  startDated: "", // 新增开始时间
  endDated: "", // 新增结束时间
  pageNum: 1,
  pageSize: 10
})
const dataList = ref([])
const multipleSelection = ref([])
const total = ref(0)
const dateRangeArr = ref([]) // 新增临时日期范围存储

// 在搜索方法前添加监听
watchEffect(() => {
  if (dateRangeArr.value && dateRangeArr.value.length === 2) {
    formParam.startDated = dateRangeArr.value[0] + " 00:00:00"
    formParam.endDated = dateRangeArr.value[1] + " 23:59:59"
  } else {
    formParam.startDated = ""
    formParam.endDated = ""
  }
})

function searchWay() {
  formParam.pageNum = 1
  formParam.pageSize = 10
  getList()
}
const resetForm = () => {
  formParam.status = ""
  formParam.applicationNo = ""
  formParam.applicantName = ""
  dateRangeArr.value = [] // 重置临时日期范围
  formParam.startDated = ""
  formParam.endDated = ""
  searchWay()
}

function handleSizeChange(val) {
  formParam.pageSize = val
  getList()
}
function handleCurrentChange(val) {
  formParam.pageNum = val
  getList()
}
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 获取指标列表
async function getList() {
  const { data } = await findAuditsByPage(formParam)
  dataList.value = data.records
  total.value = data.total
}

// 在 onMounted 中添加
onMounted(() => {
  getList()
})

const getStatusColor = (status) => {
  const target = auditStatusList.value.find((item) => item.value === status)
  return target?.color || ""
}
const getStatusLabel = (status) => {
  const target = auditStatusList.value.find((item) => item.value === status)
  return target?.label || status
}

// 查看详情
const viewDetailHandle = async (row) => {
  const { data } = await findAuditsDetails(row.id)
  auditSituationRow.value = data
  auditSituationTitle.value = "审批详情"
  auditSituationType.value = "2" // 2表示审核模式
  auditSituationVisible.value = true
}

// 预览操作
const previewHandle = (row) => {
  ElMessage.info(`预览指标：${row.indicatorInformation}`)
}

// 通过审批
const approveHandle = (row) => {
  ElMessageBox.confirm(`确认通过申请 ${row.applicationNo} 吗？`, "通过确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "success"
  }).then(async () => {
    await audits({
      applicationId: row.id,
      applicationNo: row.applicationNo,
      status: "3"
    })
    ElMessage.success("已通过审批")
    getList() // 刷新列表
  })
}

// 驳回审批
const rejectHandle = (row) => {
  ElMessageBox.prompt(`请输入驳回${row.applicationNo}原因`, "驳回确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputType: "textarea",
    inputPlaceholder: "请输入驳回原因(非必填)",
    type: "warning"
  }).then(async ({ value }) => {
    await audits({
      applicationId: row.id,
      applicationNo: row.applicationNo,
      approvalComment: value || "",
      status: "0"
    })
    ElMessage.error(`已驳回`)
    getList() // 刷新列表
  })
}
</script>
<style scoped lang="scss">
:deep(.el-tree--highlight-current) {
  .el-tree-node.is-current > .el-tree-node__content {
    background-color: #f5f7fa;
    .el-tree-node__label {
      color: #0c7cff;
      font-weight: 500;
    }
  }
}
.color-bg-yellow {
  background-color: #faad14;
}
.color-bg-green {
  background-color: #52c41a;
}
.color-bg-blue {
  background-color: #0c7cff;
}
.color-bg-red {
  background-color: #ff4d4f;
}
.color-bg-grey {
  background-color: #999999;
}

.box-dataReview {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding: 20px 20px 0 20px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  overflow: hidden;
  .tree-content {
    width: 320px;
    height: 100%;
    padding: 20px 10px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e6eb;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .box-search {
    width: 100%;
    min-height: 40px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    ::v-deep .box-search-left {
      width: auto;
      height: 100%;
      display: flex;
      flex: 1;
      align-items: center;
      box-sizing: border-box;
      .el-range-editor.el-input__wrapper {
        width: 240px !important;
      }
      .el-form-item {
        margin-bottom: 0;
      }
      .el-row {
        line-height: 45px;
      }
      .form-item-responsive .el-form-item__content {
        width: 100%;
        display: flex;
        justify-content: end;
      }
      .el-form--inline .el-form-item {
        display: inline-flex;
        margin-right: 0;
        vertical-align: middle;
        width: 100%;
      }
    }
    .box-search-right {
      width: auto;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      padding-left: 20px;
      padding-top: 2px;
      box-sizing: border-box;
      ::v-deep .zdy-input {
        width: 264px;
        height: 34px;
        line-height: 34px;
        background: #ffffff;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        margin-right: -2px;
        .el-input__wrapper {
          border-radius: 2px 0 0 2px;
        }
      }
      ::v-deep .zdy-btn {
        width: 56px;
        height: 34px;
        line-height: 34px;
        border-radius: 0;
        border-radius: 0px 2px 2px 0px;
      }
    }
  }
  .box-controller {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: #fff;
    padding: 15px 20px 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .controller-page {
    width: 100%;
    flex: 1;
    overflow: hidden;
  }
}

.card-table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.card-total-txt {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-family:
    Microsoft YaHei,
    Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin: 9px 0 5px 0;
}
.btn-group-tool {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.btn-group-notice {
  width: 100%;
  height: 32px;
  line-height: 32px;
  background: #e6f1ff;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #0c7cff;
  padding: 0 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 5px 0;
  .icon {
    width: 16px;
    height: 16px;
    color: #0c7cff;
    margin-right: 5px;
  }
  .txt {
    font-family:
      Microsoft YaHei,
      Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .num {
    padding: 0 3px;
    font-family: Helvetica, Helvetica;
    font-weight: bold;
    font-size: 16px;
    color: #0c7cff;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}

.table-list {
  width: 100%;
  // height: auto;
  display: flex;
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  ::v-deep .el-table {
    .el-table__header-wrapper {
      th {
        background-color: #f5f9fc !important;
        color: #333333;
      }
    }
    .el-table__body-wrapper {
      td {
        color: #333333;
      }
    }
  }
}

.card-pagination {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
}
.statusBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  .point {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
  }
}
</style>
